<template>
  <el-dialog
    :visible.sync="dialogVisible"
    @close='$emit("update:visible",false)'
    @open = 'handleOpen'
    title='自定义表格列'
    top='5vh'
    custom-class="share-info-dialog"
  > 

    <section class="share-info-dialog-body">
       <el-checkbox-group v-model="mycheckedCities" :min="1" @change="handleCheckedCitiesChange">

        <p v-for="(k, i) in mycities" :key="i">
          <el-checkbox  :label="k.value" >{{k.label}}</el-checkbox>
          <span class="index">
            <img src='../../../../static/images/icon_up.svg' :class='{disable:i==0}'  @click.stop.lazy='upIndex(i)' alt="">
            <img src='../../../../static/images/icon_down.svg' :class='{disable:i==cities.length-1}'  @click.stop.lazy='downIndex(i)'  alt="">
          </span>
        </p>
      </el-checkbox-group>
    </section>


    <span slot="footer" class="dialog-footer">
      <el-button type='primary' @click.stop="saveSure">保 存</el-button>
    </span>

  </el-dialog>

</template>

<script>
import Vue from 'vue';
import { Dialog, Checkbox, CheckboxGroup } from 'element-ui';
Vue.use(Checkbox);
Vue.use(CheckboxGroup);
Vue.use(Dialog);

export default {
  props: {
    visible: {
      default: false
    },
    cities: {
      default() {
        return [];
      }
    },
    checkedCities: {
      default() {
        return [];
      }
    }
  },

  data() {
    return {
      mycheckedCities: [],
      mycities: [],
      dialogVisible: false
    };
  },
  watch: {
    visible(newValue, oldValue) {
      this.dialogVisible = newValue;
    },
    cities(newVal,oldVal) {
      this.mycities = newVal
    }

  },
  methods: {
    handleOpen() {

      this.mycheckedCities = [];
      this.checkedCities.forEach(ele => {
        this.mycheckedCities.push(ele.value);
      });


    },

    handleCheckCitys(data){

      let result = []

      this.mycities.forEach(ele=>{
        if(data.includes(ele.value)){
          ele.status = true
        }else {
          ele.status = false
        }
        result.push(ele)
      })

      return result

    },
    saveSure() {
      this.$emit('update:cities', this.mycities);
   
      this.$emit('handleCheckCites', this.mycheckedCities);


      let params =  {
        showColumns:this.handleCheckCitys(this.mycheckedCities),
        type:'xxgxb'
      }

      this.Axios
        .Post(this.URL.infoSaveOrUpdateShowColumn.url,params)
        .then((res)=>{
          console.log(res,'res')

        })
      
      console.log(this.mycheckedCities,'mycheckedCities')
      this.dialogVisible = false;
            // this.mycheckedCities = [];

    },
    upIndex(i) {
      if (i === 0) return;
      let a = this.mycities[i];

      this.mycities.splice(i, 1, this.mycities[i - 1]);

      this.mycities.splice(i - 1, 1, a);
    },

    downIndex(i) {
      const len = this.mycities.length;

      if (i === len - 1) return;

      let a = this.mycities[i];

      this.mycities.splice(i, 1, this.mycities[i + 1]);

      this.mycities.splice(i + 1, 1, a);
    },
    handleCheckedCitiesChange(val) {}
  }
};
</script>

<style scoped lang='less'>
.share-info-dialog-body {
  max-height: 400px;
  overflow: auto;
  p {
    position: relative;
    line-height: 40px;
    padding-left: 20px;
    .index {
      position: absolute;
      right: 20px;
      top: 50%;
      margin-top: -15px;
    }
    img {
      width: 22px;
      height: 22px;
      display: inline-block;
      color: #38f;
      cursor: pointer;
      margin: 0 2px;
    }
    .disable {
      cursor: not-allowed;
    }
  }
}
</style>

<style lang='less'>
.share-info-dialog {
  width: 40% !important;
  .el-checkbox__inner {
    border-radius: 50% !important;
    border: 1px solid #bfcbd9 !important;
    background-color: #bfcbd9 !important;

    &::after {
      content: '';
      box-sizing: content-box !important;
      border: 2px solid #fff !important;
      border-left: 0 !important;
      border-top: 0 !important;
      height: 8px !important;
      left: 5px !important;
      position: absolute !important;
      top: 1px !important;
      -ms-transform: rotate(45deg) scaleY(1) !important;
      transform: rotate(45deg) scaleY(1) !important;
      width: 4px !important;
      transition: transform 0.15s cubic-bezier(0.71, -0.46, 0.88, 0.6) 0.05s !important;
      -ms-transform-origin: center !important;
      transform-origin: center !important;
      z-index: 909999 !important;
    }
  }

  .el-checkbox__input.is-checked {
    .el-checkbox__inner {
      border: 1px solid #20a0ff !important;
      background-color: #20a0ff !important;
    }
  }
}
</style>
